<template>
    <div class="box">
        <ul>
            <li v-for="(item, idx) in catalogueData">{{ item }} <i></i></li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            catalogueData: ['01.基础必学（3节）', '02.项目选修（5节）', '03.剪辑（5节）', '04.项目选秀二（9节）', '05.项目选修三（6节）', '06.高级班（4节）']
        }
    }
}
</script>
<style lang="less" scoped>
.box {
    ul {
        width: 790px;
        li {
            padding: 10px;
            font-weight: 500;
            font-size: 16px;
            height: 22px;
            line-height: 22px;
            color: #3e454d;
            background: #f5f8fa;
            border-radius: 12px;
            margin-bottom: 20px;
            position: relative;
            cursor: pointer;
            i {
                display: inline-block;
                width: 26px;
                height: 20px;
                background: url(../../public/img/icon.png);
                position: absolute;
                right: 20px;
            }
        }
    }
}
</style>